import moment from 'moment'
import Row from '../components/Row.vue'
import Col from '../components/Col.vue'
import Tabbar from '../components/Tabbar.vue'
import Button from '../components/Button.vue'
import Header from '../components/Header.vue'
import Avatar from '../components/Avatar.vue'
export const Logger = {
  info(type, msg) {
    console.log(`%c[${type} info] ${moment().format('YYYY-MM-DD HH:mm:ss')}\n${msg}`, 'background-color:#ccc;color:#222')
  },
  success(type, msg) {
    console.log(`%c[${type} successify] ${moment().format('YYYY-MM-DD HH:mm:ss')}\n${msg}`, 'background-color:green;color:#fff')
  },
  error(type, msg) {
    console.log(`%c[${type} failed]  ${moment().format('YYYY-MM-DD HH:mm:ss')}\n${msg}`, 'background-color:red;color:#fff')
  },
  warn(type, msg) {
    console.log(`%c[${type} warning] ${moment().format('YYYY-MM-DD HH:mm:ss')}\n${msg}`, 'background-color:yellow;color:#000')
  }
}

export default {
  install(Vue, {
    isRem = false,
    remUtil = 75
  }) {

    Vue.component(Row.name, Row);
    Vue.component(Col.name, Col);
    Vue.component(Button.name, Button);
    Vue.component(Header.name, Header);
    Vue.component(Avatar.name, Avatar);
    Vue.filter('price',val => {
      return val.toFixed(2)
    })
    Vue.component(Tabbar.name, Tabbar);
    const map = {
      pt: 'paddingTop',
      pb: 'paddingBottom',
      pl: 'paddingLeft',
      pr: 'paddingRight',
      px: 'paddingRight,paddingLeft',
      py: 'paddingTop,paddingBottom',
      p: 'padding',

      m: 'margin',
      mt: 'marginTop',
      mb: 'marginBottom',
      ml: 'marginLeft',
      mr: 'marginRight',
      mx: 'marginRight,marginLeft',
      my: 'marginTop,marginBottom',
    }

    for (const key in map) {
      if (map.hasOwnProperty(key)) {
        const val = map[key];
        Vue.directive(key, {
          inserted(el, {
            value = 24
          }) {
            const arr = val.split(',');
            for (let i = 0; i < arr.length; i++) {
              const attr = arr[i];
              if (isRem) {
                el.style[attr] = value / remUtil + 'rem'
              } else {
                el.style[attr] = value + 'px'
              }
            }
          }
        })
      }
    }

  }
}